<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PostMan 模拟工具</title>

    <!-- 引入 Element UI 的 CSS -->
    <link rel="stylesheet" href="css/element-ui.min.css">

    <!-- 引入 Vue 和 Element UI 的 JS -->
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        #app {
            display: flex;
            height: 100%;
        }

        .left-panel {
            width: 30%;
            min-width: 200px;
            padding: 10px;
            overflow: auto;
            border-right: 1px solid #ddd;
        }

        .right-panel {
            flex-grow: 1;
            padding: 10px;
            overflow: auto;
        }

        .splitter {
            cursor: ew-resize;
            width: 10px;
            background-color: #ddd;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .splitter .dots {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: #666;
            font-size: 18px;
        }

        h2 {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .el-card {
            margin-bottom: 20px;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .request-panel .el-row {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 左侧面板 -->
    <div class="left-panel">
        <el-card>
            <h2>访问记录</h2>
            <el-table :data="history" style="width: 100%">
                <el-table-column label="URL" prop="url" width="250"/>
                <el-table-column label="方法" prop="method" width="100"/>
                <el-table-column label="时间" prop="timestamp" width="180"/>
            </el-table>
        </el-card>
    </div>

    <!-- 分割线 -->
    <div class="splitter" @mousedown="startDrag">
        <div class="dots"></div>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">

        <el-tabs v-model="activeTab" class="tabs-container">
            <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="'请求 ' + (index + 1)">
                <div class="tab-header">
                    <h3>请求 {{ index + 1 }}</h3>
                    <el-button @click="removeTab(index)" type="danger" size="mini">删除</el-button>
                </div>

                <!-- 使用可重用的面板组件 -->
                <request-panel :tab="tab"></request-panel>
            </el-tab-pane>
        </el-tabs>

        <div style="margin-bottom: 20px;">
            <el-button
                    size="small"
                    @click="addTab(editableTabsValue)"
            >
                add tab
            </el-button>
        </div>
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
                    v-for="(item, index) in editableTabs"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
            >
                {{item.content}}
            </el-tab-pane>
        </el-tabs>

        <el-card>
            <h2>请求面板</h2>
            <el-form :model="requestData" ref="form" label-width="120px">
                <!-- 请求方法和 URL 放在同一行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="请求方法">
                            <el-select v-model="requestData.method" placeholder="选择方法">
                                <el-option label="GET" value="GET"></el-option>
                                <el-option label="POST" value="POST"></el-option>
                                <el-option label="PUT" value="PUT"></el-option>
                                <el-option label="DELETE" value="DELETE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="URL">
                            <el-input v-model="requestData.url" placeholder="输入请求 URL"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- Params、Headers 和 Body -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="Params">
                            <el-input v-model="requestData.params" placeholder="输入请求参数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Headers">
                            <el-input v-model="requestData.headers" placeholder="输入请求头"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Body">
                            <el-input type="textarea" v-model="requestData.body" placeholder="输入请求体"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="sendRequest">发送请求</el-button>
                </el-form-item>
            </el-form>

            <div v-if="responseData">
                <h3>响应结果</h3>
                <pre>{{ responseData }}</pre>
            </div>
        </el-card>
    </div>
</div>

<script>

    // 定义一个 Vue 组件用于面板内容
    Vue.component('request-panel', {
        props: ['tab'],
        template: `
        <el-form :model="tab.requestData" label-width="120px">
          <el-row :gutter="20">
            <!-- 请求方式和 URL -->
            <el-col :span="8">
              <el-form-item label="请求方法">
                <el-select v-model="tab.requestData.method" placeholder="选择方法">
                  <el-option label="GET" value="GET"></el-option>
                  <el-option label="POST" value="POST"></el-option>
                  <el-option label="PUT" value="PUT"></el-option>
                  <el-option label="DELETE" value="DELETE"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="URL">
                <el-input v-model="tab.requestData.url" placeholder="输入请求 URL"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 参数 Tabs -->
          <el-tabs v-model="tab.activeTab">
            <el-tab-pane label="Params" name="params">
              <div v-for="(param, index) in tab.requestData.params" :key="index">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-input v-model="param.key" placeholder="Key"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="param.value" placeholder="Value"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="removeParam(tab, index)" icon="el-icon-delete" size="small" type="danger"></el-button>
                  </el-col>
                </el-row>
              </div>
              <el-button @click="addParam(tab)" type="primary" size="small" icon="el-icon-plus">添加参数</el-button>
            </el-tab-pane>
            <!-- 更多 Tabs 同理... -->
          </el-tabs>
        </el-form>
      `,
        methods: {
            // 添加新的参数
            addParam(tab) {
                tab.requestData.params.push({ key: '', value: '' });
            },

            // 删除参数
            removeParam(tab, index) {
                tab.requestData.params.splice(index, 1);
            },
        }
    });

    // Vue 实例
    new Vue({
        el: '#app',
        data() {
            return {
                activeTab: 0,
                editableTabsValue: '2',
                tabIndex: 2,
                editableTabs:[],
                requestData: {
                    method: 'GET',
                    url: '',
                    params: '',
                    headers: '',
                    body: ''
                },
                responseData: null,
                history: [],
                leftPanelWidth: 30 // 左侧面板的初始宽度百分比
            };
        },
        methods: {
            async sendRequest() {
                // 保存请求到访问记录
                const timestamp = new Date().toLocaleString();
                this.history.push({
                    url: this.requestData.url,
                    method: this.requestData.method,
                    timestamp: timestamp
                });

                try {
                    // 根据请求方法发送请求
                    let response;
                    if (this.requestData.method === 'GET') {
                        response = await axios.get(this.requestData.url);
                    } else if (this.requestData.method === 'POST') {
                        response = await axios.post(this.requestData.url, this.requestData.body);
                    } else if (this.requestData.method === 'PUT') {
                        response = await axios.put(this.requestData.url, this.requestData.body);
                    } else if (this.requestData.method === 'DELETE') {
                        response = await axios.delete(this.requestData.url);
                    }

                    // 显示响应结果
                    this.responseData = response.data;
                } catch (error) {
                    this.responseData = error.message;
                }
            },
            startDrag(event) {
                // 记录鼠标初始位置
                const initialMouseX = event.clientX;
                const initialLeftPanelWidth = this.leftPanelWidth;

                const onMouseMove = (moveEvent) => {
                    const offset = moveEvent.clientX - initialMouseX;
                    const newLeftPanelWidth = Math.max(20, initialLeftPanelWidth + (offset / window.innerWidth) * 100); // 防止宽度过小
                    this.leftPanelWidth = newLeftPanelWidth;
                };

                const onMouseUp = () => {
                    // 移除鼠标移动和松开事件
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                };

                // 绑定鼠标移动和松开事件
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            },
            // 添加新的 Tab
            addTab() {
                this.tabs.push({
                    requestData: {
                        method: 'GET',
                        url: '',
                        params: [],
                    },
                    activeTab: 'params',
                });
            },

            // 删除 Tab
            removeTab(index) {
                this.tabs.splice(index, 1);
            }
            // addTab(targetName) {
            //     let newTabName = ++this.tabIndex + '';
            //     this.editableTabs.push({
            //         title: 'New Tab',
            //         name: newTabName,
            //         content: 'New Tab content'
            //     });
            //     this.editableTabsValue = newTabName;
            // },
            // removeTab(targetName) {
            //     let tabs = this.editableTabs;
            //     let activeName = this.editableTabsValue;
            //     if (activeName === targetName) {
            //         tabs.forEach((tab, index) => {
            //             if (tab.name === targetName) {
            //                 let nextTab = tabs[index + 1] || tabs[index - 1];
            //                 if (nextTab) {
            //                     activeName = nextTab.name;
            //                 }
            //             }
            //         });
            //     }
            //
            //     this.editableTabsValue = activeName;
            //     this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            // }
        },
        watch: {
            leftPanelWidth(newWidth) {
                // 动态更新左侧面板宽度
                document.querySelector('.left-panel').style.width = `${newWidth}%`;
            }
        }
    });
</script>

</body>
</html>
